<template>
    <div>
        <el-row>
            <el-col :span="8" align="left">
                <span>操作人姓名：</span>
                <el-input placeholder="请输入操作人姓名" v-model="operatorName" clearable></el-input>
            </el-col>
            <el-col :span="8" align="left">
                <span>操作人手机号：</span>
                <el-input placeholder="请输入操作人手机号" v-model="operatorPhone" clearable style="width:50%;"></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4" align="left">
                <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="16"></el-col>
            <el-col :span="4"></el-col>
        </el-row> 
        <el-table
            :data="table"
            v-loading="tableLoading"
            border
            stripe 
            size="small"
            height="500"
            style="width: 100%">
            <el-table-column
                label="日志时间"
                prop="createdTime"
                align="center"
                width="200">
            </el-table-column>
            <el-table-column
                label="操作人ID"
                prop="operatorId"
                align="center"
                width="80">
            </el-table-column> 
            <el-table-column
                label="操作人姓名"
                prop="operatorName"
                align="center"
                width="100">
            </el-table-column> 
            <el-table-column
                label="操作人手机号"
                prop="operatorPhone"
                align="center"
                width="150">
            </el-table-column>  
            <el-table-column
                label="记录ID"
                prop="recordId"
                align="center"
                width="100">
            </el-table-column>  
            <el-table-column
                label="记录平台"
                prop="recordPlatform"
                :show-overflow-tooltip="true"
                align="center"
                width="100">
            </el-table-column>  
            <el-table-column
                label="记录信息"
                align="center"
                prop="recordInfo"
                :show-overflow-tooltip="true"
                width="200">
            </el-table-column>
            <el-table-column
                label="记录类型"
                align="center"
                prop="recordType"
                :show-overflow-tooltip="true"
                width="100">
            </el-table-column>
        </el-table>
        <el-pagination
            background
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="totalCount"
            style="margin:50px;">
        </el-pagination>
        <div style="margin:30px 0;" class="fw">共{{Math.ceil(totalCount/pageSize)}}页,{{totalCount}}条信息</div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            operatorName:"",
            operatorPhone:"",
            tableLoading:false,
            table:[],
            currentPage: 1,
            pageSize: 20,
            totalCount: 0,        
        }
    },
    mounted(){
        this.initData()
    },
    methods:{
        requestInfo(){
            this.tableLoading=true;
            this.postRequest("/mall/review/manage", {
                operatorName:this.operatorName,
                operatorPhone:this.operatorPhone, 
                pageIndex: this.currentPage,
                pageSize: this.pageSize
            })
            .then(resp => {  
                this.tableLoading=false;
                if (resp && resp.data.status == 200){
                    this.table=resp.data.obj.rows;
                    this.totalCount = resp.data.obj.total;
                }
            });
        },
        initData(){
          this.requestInfo()
        },
        search(){
            this.currentPage = 1;
            this.requestInfo()
        },
        //列表当前页改变
        currentChange: function(currentChange) {
            this.currentPage = currentChange;
            this.requestInfo()
        },
    }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 30px;
  height: 50px;
  line-height: 50px;
}
.el-col {
  height: 50px;
  line-height: 50px;
}
.el-input{
    width: 70%;
}
.ql-snow.ql-toolbar{
    position: absolute !important;
    background-color: #fff !important;
    z-index: 2 !important;
    top: 0;
}
.ql-editor{
    height: 300px;
    overflow-y: scroll;
}
.ivu-upload {
    display: none;
}
</style>
